import { ProFormText, ProForm } from '@ant-design/pro-form';
import { LockOutlined } from '@ant-design/icons';
import { changePassword } from '@/services/user';
import { Card, message } from 'antd';
import PageHeader from '@/components/page/PageHeader';

export default () => {
  return (
    <PageHeader>
      <div style={{ marginTop: 90, marginLeft: 100 }}>
        <Card title="修改密码" style={{ width: 400 }}>
          <ProForm
            onFinish={async (values) => {
              if (values.newPassword !== values.okNewPassword) {
                message.error('新密码和确认密码不一致！');
                return;
              }
              await changePassword(values.oldPassword, values.newPassword);
              message.success('密码修改成功');
            }}
          >
            <ProFormText.Password
              name="oldPassword"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined />,
              }}
              placeholder="请输入原密码..."
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
            <ProFormText.Password
              name="newPassword"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined />,
              }}
              placeholder="请输入新密码..."
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
            <ProFormText.Password
              name="okNewPassword"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined />,
              }}
              placeholder="请输入新密码..."
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          </ProForm>
        </Card>
      </div>
    </PageHeader>
  );
};
